<template>
	<div class="hot">
		<aside>
			<span>书城管理——热度图片管理</span>
			<button @click="html()"><i class="el-icon-refresh-right"></i></button>
		</aside>
		<button class="btu"><router-link to="/admin/addhot">添加图片</router-link></button>
		<template>
			<el-table :data="pics" border style="width: 95%;margin: 0 auto;">
				<el-table-column prop="memo" label="描述">
				</el-table-column>
				<el-table-column prop="type" label="类型">
				</el-table-column>
				<el-table-column prop="hot" label="优先级">
				</el-table-column>
				<el-table-column label="头像">
					<template slot-scope="scope">
						<el-image style="width: 70px; height: 50px"
							:src="`${$ip}/api/public/showimg/${scope.row.picture}`">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click.native.prevent="remove(scope.row.id)" type="danger" size="small">
							移除
						</el-button>
						<el-button @click="dialogFormVisible = true" @click.native.prevent="goUpdate(scope.row.id)"
							type="primary" size="small">
							修改
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>

<script>
	export default {
		name: 'AdminHotImg',
		data() {
			return {
				pics: [],
			}
		},
		methods: {
			html() {
				location.reload();
			},
			remove(id) {
				console.log(id);
				this.$get('/api/adm/hot/remove/' + id).then((resp) => {
					this.$message({
						message: resp.data.msg,
						type: 'success'
					})
					this.findAll();
				})
			},
			goUpdate(id) {
				this.$router.push({
					path: '/admin/addHot',
					query: {
						id: id
					}
				})
			},
			findAll() {
				this.$get('/api/adm/hot/findAll').then((resp) => {
					this.pics = resp.data.data;
				})
			}
		},
		mounted() {
			this.findAll();
		}
	}
</script>

<style scoped>
	a {
		color: white;
	}

	.hot {
		width: 83%;
		height: 90vh;
		margin-left: 2%;
	}

	.hot aside {
		width: 95%;
		margin: 20px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: gainsboro 1px solid;
	}

	.hot aside button {
		background-color: #009688;
		border: none;
		outline: none;
		color: white;
		height: 40px;
		width: 60px;
		border-radius: 3px;
	}

	.hot aside span {
		font-size: 15px;
	}

	.hot .btu {
		background-color: #009688;
		color: white;
		border: none;
		outline: none;
		width: 150px;
		height: 40px;
		border-radius: 5px;
		margin-left: 40px;
		margin-bottom: 20px;
	}
</style>